<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>报表生成 - 智能工业数据采集与分析系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f8f9fa;
        }
        .sidebar {
            background-color: #2c3e50;
            color: white;
            min-height: 100vh;
            position: fixed;
        }
        .sidebar a {
            color: #ecf0f1;
            display: block;
            padding: 12px 15px;
            text-decoration: none;
            transition: background-color 0.3s;
        }
        .sidebar a:hover {
            background-color: #34495e;
        }
        .sidebar a.active {
            background-color: #16a085;
        }
        .content {
            margin-left: 250px;
            padding: 20px;
        }
        .card {
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        .status-indicator {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 5px;
        }
        .status-green {
            background-color: #27ae60;
        }
        .status-yellow {
            background-color: #f39c12;
        }
        .status-red {
            background-color: #e74c3c;
        }
        .report-card {
            border-left: 4px solid #3498db;
        }
        .report-card.generated {
            border-left: 4px solid #27ae60;
        }
        .report-card.generating {
            border-left: 4px solid #f39c12;
        }
        .report-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .report-date {
            font-size: 0.9rem;
            color: #666;
        }
        .report-title {
            font-weight: bold;
            margin-bottom: 5px;
        }
        .report-description {
            margin-bottom: 10px;
        }
        .filter-section {
            margin-bottom: 20px;
        }
        .chart-container {
            position: relative;
            height: 300px;
            width: 100%;
            margin-bottom: 20px;
        }
        .action-btn {
            margin-right: 5px;
            padding: 5px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .action-btn-primary {
            background-color: #3498db;
            color: white;
        }
        .action-btn-primary:hover {
            background-color: #2980b9;
        }
        .action-btn-secondary {
            background-color: #95a5a6;
            color: white;
        }
        .action-btn-secondary:hover {
            background-color: #7f8c8d;
        }
        .action-btn-danger {
            background-color: #e74c3c;
            color: white;
        }
        .action-btn-danger:hover {
            background-color: #c0392b;
        }
        .modal-backdrop {
            background-color: rgba(0, 0, 0, 0.5);
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }
        .modal {
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            width: 90%;
            max-width: 600px;
            max-height: 80vh;
            overflow-y: auto;
        }
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid #ddd;
        }
        .modal-title {
            margin: 0;
            font-size: 1.25rem;
        }
        .modal-close {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-control {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .form-control:focus {
            outline: none;
            border-color: #3498db;
        }
        .hidden {
            display: none;
        }
        .report-filter-container {
            background-color: #f1f1f1;
            padding: 15px;
            border-radius: 4px;
            margin-bottom: 20px;
        }
        .report-options-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
        }
        .report-preview-container {
            background-color: white;
            padding: 20px;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .report-preview-header {
            text-align: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #3498db;
        }
        .report-preview-title {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .report-preview-subtitle {
            color: #666;
        }
        .report-section {
            margin-bottom: 30px;
        }
        .report-section-title {
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 15px;
            padding-bottom: 8px;
            border-bottom: 1px solid #ddd;
        }
        .report-table {
            width: 100%;
            border-collapse: collapse;
        }
        .report-table th,
        .report-table td {
            padding: 10px;
            border: 1px solid #ddd;
        }
        .report-table th {
            background-color: #f8f9fa;
            font-weight: bold;
        }
        .report-table tr:nth-child(even) {
            background-color: #f8f9fa;
        }
        .badge {
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 0.8rem;
            color: white;
        }
        .badge-success {
            background-color: #27ae60;
        }
        .badge-warning {
            background-color: #f39c12;
        }
        .badge-danger {
            background-color: #e74c3c;
        }
        .badge-info {
            background-color: #3498db;
        }
        .loading-spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(52, 152, 219, 0.3);
            border-radius: 50%;
            border-top-color: #3498db;
            animation: spin 1s ease-in-out infinite;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="sidebar" style="width: 250px;">
        <div class="sidebar-header p-4 text-center">
            <h4><i class="fa fa-industry"></i> 工业数据系统</h4>
        </div>
        <div class="sidebar-menu">
            <a href="/" class=""><i class="fa fa-dashboard mr-2"></i> 仪表盘</a>
            <a href="/dashboard"><i class="fa fa-bar-chart mr-2"></i> 数据监控</a>
            <a href="/alarms"><i class="fa fa-bell mr-2"></i> 报警中心</a>
            <a href="/maintenance"><i class="fa fa-wrench mr-2"></i> 维护管理</a>
            <a href="/reports" class="active"><i class="fa fa-file-text mr-2"></i> 报表生成</a>
        </div>
    </div>

    <div class="content">
        <div class="container-fluid">
            <div class="row mb-4">
                <div class="col-12">
                    <div class="d-flex justify-content-between align-items-center">
                        <h2>报表生成与管理</h2>
                        <div class="d-flex align-items-center">
                            <span id="connection-status" class="mr-4">
                                <span class="status-indicator status-green"></span>
                                <span>系统正常</span>
                            </span>
                            <span id="current-time">--:--:--</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 报表概览卡片 -->
            <div class="row mb-4">
                <div class="col-md-3">
                    <div class="card bg-primary text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <h5 class="card-title">本月报表</h5>
                                <i class="fa fa-calendar-check-o fa-2x"></i>
                            </div>
                            <p class="card-text" style="font-size: 2.5rem; font-weight: bold;">12</p>
                            <p class="card-text">已生成报表数量</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-info text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <h5 class="card-title">AI分析报告</h5>
                                <i class="fa fa-cogs fa-2x"></i>
                            </div>
                            <p class="card-text" style="font-size: 2.5rem; font-weight: bold;">5</p>
                            <p class="card-text">带AI分析的报表</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-success text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <h5 class="card-title">报表下载</h5>
                                <i class="fa fa-download fa-2x"></i>
                            </div>
                            <p class="card-text" style="font-size: 2.5rem; font-weight: bold;">24</p>
                            <p class="card-text">本月下载次数</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-warning text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <h5 class="card-title">计划报表</h5>
                                <i class="fa fa-calendar fa-2x"></i>
                            </div>
                            <p class="card-text" style="font-size: 2.5rem; font-weight: bold;">3</p>
                            <p class="card-text">待生成的计划报表</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 报表生成选项 -->
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">生成新报表</h5>
                            <div class="report-filter-container">
                                <div class="report-options-grid">
                                    <div class="form-group">
                                        <label for="report-type">报表类型</label>
                                        <select id="report-type" class="form-control">
                                            <option value="daily">日报</option>
                                            <option value="weekly">周报</option>
                                            <option value="monthly">月报</option>
                                            <option value="quarterly">季报</option>
                                            <option value="custom">自定义</option>
                                            <option value="maintenance">维护分析报告</option>
                                            <option value="alarm">报警统计报告</option>
                                            <option value="energy">能耗分析报告</option>
                                            <option value="ai_prediction">AI预测分析报告</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="report-start-date">开始日期</label>
                                        <input type="date" id="report-start-date" class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label for="report-end-date">结束日期</label>
                                        <input type="date" id="report-end-date" class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label for="report-format">输出格式</label>
                                        <select id="report-format" class="form-control">
                                            <option value="pdf">PDF</option>
                                            <option value="excel">Excel</option>
                                            <option value="html">HTML</option>
                                            <option value="csv">CSV</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="mt-4 text-right">
                                    <button id="generate-report-btn" class="action-btn action-btn-primary">
                                        <i class="fa fa-file-text-o mr-1"></i> 生成报表
                                    </button>
                                    <button id="preview-report-btn" class="action-btn action-btn-secondary ml-2">
                                        <i class="fa fa-eye mr-1"></i> 预览报表
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 报表预览 -->
            <div id="report-preview-section" class="row mb-4 hidden">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-4">
                                <h5 class="card-title">报表预览</h5>
                                <div>
                                    <button id="close-preview-btn" class="action-btn action-btn-secondary">
                                        <i class="fa fa-times mr-1"></i> 关闭预览
                                    </button>
                                </div>
                            </div>
                            
                            <div class="report-preview-container">
                                <div class="report-preview-header">
                                    <div class="report-preview-title">工业数据系统日报</div>
                                    <div class="report-preview-subtitle">生成日期：2023-05-15 | 报告周期：2023-05-14</div>
                                </div>
                                
                                <!-- 系统概览部分 -->
                                <div class="report-section">
                                    <div class="report-section-title">系统概览</div>
                                    <div class="grid grid-cols-3 gap-4 mb-4">
                                        <div class="bg-blue-50 p-3 rounded">
                                            <div class="text-sm text-gray-600">传感器总数</div>
                                            <div class="text-xl font-bold">20</div>
                                        </div>
                                        <div class="bg-green-50 p-3 rounded">
                                            <div class="text-sm text-gray-600">正常运行</div>
                                            <div class="text-xl font-bold">19</div>
                                        </div>
                                        <div class="bg-yellow-50 p-3 rounded">
                                            <div class="text-sm text-gray-600">待维护</div>
                                            <div class="text-xl font-bold">1</div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 数据汇总部分 -->
                                <div class="report-section">
                                    <div class="report-section-title">数据汇总</div>
                                    <table class="report-table">
                                        <thead>
                                            <tr>
                                                <th>传感器类型</th>
                                                <th>最小值</th>
                                                <th>最大值</th>
                                                <th>平均值</th>
                                                <th>数据点</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>温度 (°C)</td>
                                                <td>22.1</td>
                                                <td>35.6</td>
                                                <td>28.7</td>
                                                <td>4,852</td>
                                            </tr>
                                            <tr>
                                                <td>压力 (bar)</td>
                                                <td>1.2</td>
                                                <td>5.8</td>
                                                <td>3.4</td>
                                                <td>3,246</td>
                                            </tr>
                                            <tr>
                                                <td>振动 (mm/s)</td>
                                                <td>0.1</td>
                                                <td>1.2</td>
                                                <td>0.4</td>
                                                <td>2,587</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                
                                <!-- 图表展示部分 -->
                                <div class="report-section">
                                    <div class="report-section-title">数据趋势</div>
                                    <div class="chart-container">
                                        <canvas id="reportChart"></canvas>
                                    </div>
                                </div>
                                
                                <!-- 报警统计部分 -->
                                <div class="report-section">
                                    <div class="report-section-title">报警统计</div>
                                    <table class="report-table">
                                        <thead>
                                            <tr>
                                                <th>报警类型</th>
                                                <th>次数</th>
                                                <th>级别</th>
                                                <th>处理状态</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>温度过高</td>
                                                <td>3</td>
                                                <td><span class="badge badge-warning">警告</span></td>
                                                <td>已处理</td>
                                            </tr>
                                            <tr>
                                                <td>压力异常</td>
                                                <td>1</td>
                                                <td><span class="badge badge-danger">严重</span></td>
                                                <td>已处理</td>
                                            </tr>
                                            <tr>
                                                <td>传感器离线</td>
                                                <td>2</td>
                                                <td><span class="badge badge-warning">警告</span></td>
                                                <td>已处理</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                
                                <!-- 维护建议部分 -->
                                <div class="report-section">
                                    <div class="report-section-title">AI维护建议</div>
                                    <div class="bg-gray-50 p-4 rounded">
                                        <p><strong>基于数据分析的维护建议：</strong></p>
                                        <ul class="list-disc pl-5 mt-2">
                                            <li>振动传感器2 (ID: vibration_sensor_002) 的振动模式显示异常，建议在3天内检查并更换轴承。</li>
                                            <li>温度传感器1 (ID: temp_sensor_001) 响应时间延长，建议进行校准检查。</li>
                                            <li>压力传感器1 (ID: pressure_sensor_001) 零点漂移略有增加，建议进行定期校准。</li>
                                        </ul>
                                        <p class="mt-3 text-sm text-gray-600">
                                            <strong>AI分析准确度：</strong> 92%
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 历史报表记录 -->
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-4">
                                <h5 class="card-title">历史报表</h5>
                                <div class="d-flex">
                                    <div class="mr-2">
                                        <select id="report-filter" class="form-control">
                                            <option value="all">全部报表</option>
                                            <option value="daily">日报</option>
                                            <option value="weekly">周报</option>
                                            <option value="monthly">月报</option>
                                            <option value="maintenance">维护分析报告</option>
                                            <option value="alarm">报警统计报告</option>
                                            <option value="energy">能耗分析报告</option>
                                            <option value="ai_prediction">AI预测分析报告</option>
                                        </select>
                                    </div>
                                    <button id="load-more-reports-btn" class="action-btn action-btn-secondary">加载更多</button>
                                </div>
                            </div>
                            
                            <!-- 历史报表列表 -->
                            <div class="report-list">
                                <!-- 已生成报表 -->
                                <div class="card mb-3 report-card generated">
                                    <div class="card-body">
                                        <div class="report-header">
                                            <div>
                                                <div class="report-title">工业数据系统日报 - 2023-05-14</div>
                                                <div class="report-date">生成时间: 2023-05-15 08:00:00 | 格式: PDF</div>
                                            </div>
                                            <div>
                                                <button class="action-btn action-btn-primary" data-report-id="1">下载</button>
                                                <button class="action-btn action-btn-secondary">预览</button>
                                                <button class="action-btn action-btn-danger">删除</button>
                                            </div>
                                        </div>
                                        <div class="report-description">
                                            包含系统运行状态、传感器数据汇总、报警统计和AI维护建议。
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 已生成报表 -->
                                <div class="card mb-3 report-card generated">
                                    <div class="card-body">
                                        <div class="report-header">
                                            <div>
                                                <div class="report-title">AI预测分析报告 - 2023-05-10</div>
                                                <div class="report-date">生成时间: 2023-05-10 16:30:00 | 格式: PDF</div>
                                            </div>
                                            <div>
                                                <button class="action-btn action-btn-primary" data-report-id="2">下载</button>
                                                <button class="action-btn action-btn-secondary">预览</button>
                                                <button class="action-btn action-btn-danger">删除</button>
                                            </div>
                                        </div>
                                        <div class="report-description">
                                            基于历史数据的设备故障预测分析，包含详细的趋势分析和维护建议。
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 已生成报表 -->
                                <div class="card mb-3 report-card generated">
                                    <div class="card-body">
                                        <div class="report-header">
                                            <div>
                                                <div class="report-title">能耗分析报告 - 2023-04</div>
                                                <div class="report-date">生成时间: 2023-05-01 09:00:00 | 格式: Excel</div>
                                            </div>
                                            <div>
                                                <button class="action-btn action-btn-primary" data-report-id="3">下载</button>
                                                <button class="action-btn action-btn-secondary">预览</button>
                                                <button class="action-btn action-btn-danger">删除</button>
                                            </div>
                                        </div>
                                        <div class="report-description">
                                            4月份设备能耗分析，包含能耗趋势图、节能建议和成本分析。
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 报表生成进度模态框 -->
    <div id="progress-modal" class="modal-backdrop hidden">
        <div class="modal">
            <div class="modal-header">
                <h3 class="modal-title">正在生成报表</h3>
                <button class="modal-close" id="close-progress-modal-btn">×</button>
            </div>
            <div class="modal-body">
                <div class="mb-4">
                    <div class="progress-bar">
                        <div id="progress-fill" class="progress-fill" style="width: 0%; background-color: #3498db;"></div>
                    </div>
                </div>
                <div id="progress-message" class="text-center">
                    <p>正在收集数据...</p>
                    <div class="loading-spinner mx-auto mt-4"></div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 更新当前时间
        function updateCurrentTime() {
            const now = new Date();
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            document.getElementById('current-time').textContent = `${hours}:${minutes}:${seconds}`;
        }
        setInterval(updateCurrentTime, 1000);
        updateCurrentTime();

        // 报表图表对象
        let reportChart;

        // 初始化报表预览图表
        function initReportChart() {
            const ctx = document.getElementById('reportChart').getContext('2d');
            
            // 模拟数据 - 过去7天的温度数据
            const labels = [];
            const currentDate = new Date();
            for (let i = 6; i >= 0; i--) {
                const date = new Date(currentDate);
                date.setDate(currentDate.getDate() - i);
                labels.push(`${date.getMonth() + 1}/${date.getDate()}`);
            }
            
            // 生成模拟数据
            const temperatureData = [];
            const pressureData = [];
            const vibrationData = [];
            
            for (let i = 0; i < 7; i++) {
                temperatureData.push((Math.random() * 15 + 20).toFixed(1));
                pressureData.push((Math.random() * 3 + 2).toFixed(1));
                vibrationData.push((Math.random() * 0.5 + 0.2).toFixed(2));
            }
            
            reportChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [
                        {
                            label: '温度 (°C)',
                            data: temperatureData,
                            borderColor: '#e74c3c',
                            backgroundColor: 'rgba(231, 76, 60, 0.1)',
                            tension: 0.4,
                            fill: false
                        },
                        {
                            label: '压力 (bar)',
                            data: pressureData,
                            borderColor: '#3498db',
                            backgroundColor: 'rgba(52, 152, 219, 0.1)',
                            tension: 0.4,
                            fill: false
                        },
                        {
                            label: '振动 (mm/s)',
                            data: vibrationData,
                            borderColor: '#27ae60',
                            backgroundColor: 'rgba(39, 174, 96, 0.1)',
                            tension: 0.4,
                            fill: false
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                        },
                        tooltip: {
                            mode: 'index',
                            intersect: false,
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: false
                        }
                    }
                }
            });
        }

        // 更新系统状态
        function updateSystemStatus() {
            fetch('/api/get_status')
                .then(response => response.json())
                .then(data => {
                    // 更新连接状态
                    const connectionStatus = document.getElementById('connection-status');
                    if (data.connected) {
                        connectionStatus.innerHTML = '<span class="status-indicator status-green"></span><span>系统正常</span>';
                    } else {
                        connectionStatus.innerHTML = '<span class="status-indicator status-red"></span><span>连接断开</span>';
                    }
                })
                .catch(error => {
                    console.error('获取系统状态失败:', error);
                });
        }

        // 生成报表
        function generateReport() {
            // 获取报表生成参数
            const reportType = document.getElementById('report-type').value;
            const startDate = document.getElementById('report-start-date').value;
            const endDate = document.getElementById('report-end-date').value;
            const format = document.getElementById('report-format').value;
            
            // 验证日期
            if (!startDate) {
                alert('请选择开始日期');
                return;
            }
            
            if (reportType === 'custom' && !endDate) {
                alert('自定义报表请选择结束日期');
                return;
            }
            
            // 显示进度模态框
            const progressModal = document.getElementById('progress-modal');
            const progressFill = document.getElementById('progress-fill');
            const progressMessage = document.getElementById('progress-message');
            
            progressModal.classList.remove('hidden');
            progressFill.style.width = '0%';
            progressMessage.innerHTML = '<p>正在收集数据...</p><div class="loading-spinner mx-auto mt-4"></div>';
            
            // 模拟报表生成进度
            let progress = 0;
            const interval = setInterval(() => {
                progress += 10;
                progressFill.style.width = `${progress}%`;
                
                if (progress < 30) {
                    progressMessage.innerHTML = '<p>正在收集数据...</p><div class="loading-spinner mx-auto mt-4"></div>';
                } else if (progress < 60) {
                    progressMessage.innerHTML = '<p>正在分析数据...</p><div class="loading-spinner mx-auto mt-4"></div>';
                } else if (progress < 90) {
                    progressMessage.innerHTML = '<p>正在生成报表...</p><div class="loading-spinner mx-auto mt-4"></div>';
                } else {
                    progressMessage.innerHTML = '<p>正在格式化输出...</p><div class="loading-spinner mx-auto mt-4"></div>';
                }
                
                if (progress >= 100) {
                    clearInterval(interval);
                    setTimeout(() => {
                        progressModal.classList.add('hidden');
                        alert('报表生成成功！');
                        // 刷新报表列表
                        loadMoreReports();
                    }, 1000);
                }
            }, 300);
        }

        // 预览报表
        function previewReport() {
            const previewSection = document.getElementById('report-preview-section');
            previewSection.classList.remove('hidden');
            
            // 如果图表尚未初始化，初始化图表
            if (!reportChart) {
                initReportChart();
            } else {
                // 更新图表数据
                reportChart.update();
            }
        }

        // 关闭报表预览
        function closePreview() {
            const previewSection = document.getElementById('report-preview-section');
            previewSection.classList.add('hidden');
        }

        // 加载更多报表
        function loadMoreReports() {
            // 这里应该调用API加载更多报表
            console.log('加载更多报表');
            
            // 模拟加载中
            alert('正在加载更多报表...');
        }

        // 下载报表
        function downloadReport(reportId) {
            // 这里应该调用API下载报表
            console.log('下载报表:', reportId);
            
            // 模拟下载
            alert('报表下载中...');
        }

        // 删除报表
        function deleteReport(reportId) {
            if (confirm('确定要删除这条报表吗？')) {
                // 这里应该调用API删除报表
                console.log('删除报表:', reportId);
                alert('报表已删除');
            }
        }

        // 根据报表类型过滤
        function filterReports() {
            const filterValue = document.getElementById('report-filter').value;
            console.log('过滤报表:', filterValue);
            // 这里应该实现报表过滤逻辑
            alert('报表过滤功能待实现');
        }

        // 事件监听器：生成报表按钮
        document.getElementById('generate-report-btn').addEventListener('click', generateReport);
        
        // 事件监听器：预览报表按钮
        document.getElementById('preview-report-btn').addEventListener('click', previewReport);
        
        // 事件监听器：关闭预览按钮
        document.getElementById('close-preview-btn').addEventListener('click', closePreview);
        
        // 事件监听器：加载更多报表按钮
        document.getElementById('load-more-reports-btn').addEventListener('click', loadMoreReports);
        
        // 事件监听器：关闭进度模态框按钮
        document.getElementById('close-progress-modal-btn').addEventListener('click', function() {
            document.getElementById('progress-modal').classList.add('hidden');
        });
        
        // 事件监听器：报表类型过滤
        document.getElementById('report-filter').addEventListener('change', filterReports);
        
        // 事件监听器：下载报表按钮
        document.querySelectorAll('.action-btn-primary[data-report-id]').forEach(btn => {
            btn.addEventListener('click', function() {
                const reportId = this.getAttribute('data-report-id');
                downloadReport(reportId);
            });
        });
        
        // 事件监听器：预览报表按钮
        document.querySelectorAll('.action-btn-secondary:not(#load-more-reports-btn):not(#close-preview-btn):not(#close-progress-modal-btn)').forEach(btn => {
            btn.addEventListener('click', function() {
                // 这里应该显示报表预览
                console.log('预览报表');
                alert('报表预览功能待实现');
            });
        });
        
        // 事件监听器：删除报表按钮
        document.querySelectorAll('.action-btn-danger').forEach(btn => {
            btn.addEventListener('click', function() {
                deleteReport();
            });
        });

        // 设置默认日期
        function setDefaultDates() {
            const today = new Date();
            const yesterday = new Date(today);
            yesterday.setDate(today.getDate() - 1);
            
            const formatDate = (date) => {
                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0');
                const day = String(date.getDate()).padStart(2, '0');
                return `${year}-${month}-${day}`;
            };
            
            document.getElementById('report-start-date').value = formatDate(yesterday);
            document.getElementById('report-end-date').value = formatDate(today);
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 设置默认日期
            setDefaultDates();
            
            // 初始化系统状态
            updateSystemStatus();
            
            // 定期更新系统状态
            setInterval(updateSystemStatus, 5000);
        });
    </script>
</body>
</html>